import React, { useState } from 'react';
import { Button, Modal, Icon, Grid } from 'antd-mobile';
import { List, Avatar, Spin, Empty } from 'antd';
import {
  QrcodeOutlined,
  DownSquareOutlined,
  SearchOutlined,
} from '@ant-design/icons';
import { onestopservice } from '@/services/weapp';
import { connect, useRequest, history } from 'umi';
import styles from './index.less';
import IconFont from '@/components/IconFont';

let Service = (props) => {
  let [height, cheight] = useState(document.body.clientHeight),
    {
      global: { userinfo },
    } = props;

  let { data, loading } = useRequest(() => {
    let token = localStorage.getItem('TOKENS');
    return token ? onestopservice({}) : { list: [] };
  });

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <img
        src={require('@/assets/service.jpg')}
        alt=""
        style={{ width: '100%', marginBottom: 12 }}
      />
      <Grid
        data={data?.list?.map((it) => ({
          icon: it.origin_url,
          text: it.title,
          id: it.id,
        }))}
        onClick={(item) => {
          history.push({
            pathname: '/details',
            query: {
              id: item.id,
            },
          });
        }}
        columnNum={2}
      ></Grid>
    </div>
  );
};
export default connect(({ global, loading }) => ({
  global,
  loading,
}))(Service);
